<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-if.html">
<link rel="import" href="../../bower_components/polymer/lib/mixins/gesture-event-listeners.html">
<link rel="import" href="../../bower_components/sign-here/sign-here.html">
<link rel="import" href="../order-stages/order-stages.html">

<dom-module id="order-view">
  <template>
    <style>
      :host {
        display: block;
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
      }
      paper-card {
        width: 90%;
        max-width: 950px;
        color: #000;
      }
      paper-button {
        background: #03A9F4;
      }
      #back {
        margin: 2em;
        align-self: flex-start;
      }
      sign-here {
        border-bottom: rgba(0,0,0,0.5) solid 1px;
        margin-bottom: 3em;
        width: 400px;
      }
    </style>
    <paper-card heading="Order: [[order.id]]">
      <order-stages stages="[[_selectedStages]]"
        order="[[order]]"></order-stages>
      <section class="card-content">
        <h2>Next Step:</h2>
        <template is="dom-if" if="[[_deliveryConfirmed(order)]]">
          <p>Delivered by company and confirmed.</h2>
        </template>
        <template is="dom-repeat"
          as="option"
          items="[[getOptions(_stageOptions, order, currentUser)]]">
          <paper-button
            action$="[[option.value]]"
            on-tap="_updateStatus">[[ option.title ]]</paper-button>
        </template>
        <template is="dom-if" if="[[_recipientLoggedIn(currentUser)]]">
          <template is="dom-if" if="[[!_deliveryComplete(order)]]">
            <template is="dom-if" if="[[!_deliveryConfirmed(order)]]">
              <p>Awaiting delivery by logistics company: [[order.transport.company]]</h2>
            </template>
            <template is="dom-if" if="[[_deliveryConfirmed(order)]]">
              <p>Delivered by company: [[order.transport.company]] and confirmed.</h2>
            </template>
          </template>
          <template is="dom-if" if="[[_deliveryComplete(order)]]">
            <p>Sign to confirm successful delivery</p>
            <sign-here
              width="400"
              height="200"
              image="{{image}}"></sign-here>
            <template is="dom-if" if="[[image]]">
              <paper-button
                action="DELIVERY_CONFIRMED"
                on-tap="_updateStatus">Confirm Delivery</paper-button>
            </template>
          </template>
        </template>
      </section>
    </paper-card>
    <paper-button
      id="back"
      on-tap="_back">Back to scanner</paper-button>

  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class OrderView extends Polymer.GestureEventListeners(Polymer.Element) {
      static get is() { return 'order-view'; }
      static get properties() {
        return {
          states: {
            type: Array,
            value: []
          },
          _deliveryTBC: {
            type: Boolean,
            value: false
          },
          _stageOptions: {
            type: Object,
            value: {
              "AWAITING_PICKUP": [{
                title: "MARK ENROUTE",
                value: "ENROUTE"
              }],
              "ENROUTE": [{
                title: "MARK DELAYED",
                value: "DELAYED"
              },{
                title: "MARK CANCELLED",
                value: "CANCELLED"
              },{
                title: "MARK DELIVERED",
                value: "DELIVERED"
              },{
                title: "MARK PART-DELIVERED",
                value: "PARTIALLY_DELIVERED"
              }]
            }
          },
          _selectedStages: {
            type: Array,
            value: ["AWAITING_PICKUP", "ENROUTE", "DELIVERED", "DELIVERY_CONFIRMED"]
          },
          order: {
            type: Object,
            value: {}
          }
        };
      }
      getOptions(_stageOptions, order, currentUser) {
        if (currentUser === "RECIPIENT") {
          return [];
        }
        try {
          return _stageOptions[order.transport.status];
        } catch (error) {
          return [];
        }
      }
      _back() {
        console.log(this.image);
        this.dispatchEvent(new CustomEvent('back'));
      }
      _updateStatus(event) {
        let state = event.target.getAttribute('action');
        this.dispatchEvent(new CustomEvent('advance', { detail: {
          state: state
        }}));
      }
      _recipientLoggedIn(currentUser) {
        return currentUser === "RECIPIENT";
      }
      _deliveryComplete(order) {
        return order && order.transport && (order.transport.status === "DELIVERED" || order.transport.status === "PART_DELIVERED");
      }
      _deliveryConfirmed(order) {
        return order && order.transport && order.transport.status === "DELIVERY_CONFIRMED";
      }
    }

    window.customElements.define(OrderView.is, OrderView);
  </script>
</dom-module>
